<template>
    <!--电销管理 已处理-->
    <div class="content_panel project_modules">
        <div class="content_panel project_modules">
            <div class="content_panel_top">
                <h3 class="panel_title">
                    <span>{{ $t('salesManage.processed') }}</span>
                </h3>
                <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <el-form-item prop="realName"><!--姓名-->
                                <el-input v-model="form.realName" :placeholder="$t('common.name')" type="text"
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item prop="phone"><!--手机号-->
                                <el-input v-model="form.phone" :placeholder="$t('common.mobileNumber')" type="text"
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item prop="batchCode"><!--批次号-->
<!--                                <el-input v-model="form.batchCode" :placeholder="$t('salesManage.batchNumber')"
                                          type="text" clearable></el-input>-->
                                <el-select v-model="form.batchCode" multiple collapse-tags :placeholder="$t('salesManage.batchNumber')" clearable style="width: 100%;">
                                    <el-option v-for="code in batchCodeList" :key="code" :value="code" :label="code"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="distributionTime" label=""><!--分派时间-->
                                <el-date-picker
                                    v-model="form.distributionTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    :editable="false"
                                    range-separator="-"
                                    :start-placeholder="$t('common.dispatchStartTime')"
                                    :end-placeholder="$t('common.dispatchEndTime')"
                                    :default-time="['00:00:00', '23:59:59']"
                                    class="el-select"
                                    style="width:100%;"
                                    clearable>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <!--营销类型-->
                        <el-col :span="4">
                            <el-form-item prop="marketingType">
                                <el-select v-model="form.marketingType" @change="handleMarketTypeChange" clearable :placeholder="$t('salesManage.marketingType')"
                                           style="width: 100%"><!--营销类型-->
                                    <el-option v-for="item in keyMap.marketingType()" :key="item.value"
                                               :value="item.value" :label="item.label"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <!--所属APP-->
                        <el-col :span="4">
                            <el-form-item prop="appName">
                                <select-app-list v-model="form.appName"
                                                 :placeholder="$t('common.ownedApp')"></select-app-list><!--所属APP-->
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="nextFollowTime" label=""><!--分派时间-->
                                <el-date-picker
                                    v-model="form.nextFollowTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    :editable="false"
                                    range-separator="-"
                                    :start-placeholder="$t('salesManage.nextFollowStartTime')"
                                    :end-placeholder="$t('salesManage.nextFollowEndTime')"
                                    :default-time="['00:00:00', '23:59:59']"
                                    class="el-select"
                                    style="width:100%;"
                                    clearable>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col v-if="roleId === 2||roleId === 3" :span="4">
                            <el-form-item prop="salesmanName"><!--电销员-->
                                <el-input v-model="form.salesmanName" :placeholder="$t('salesManage.salesman')"
                                          type="text" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col v-if="roleId === 3" :span="4">
                            <el-form-item prop="salesmanGroupName"><!--电销小组-->
                                <el-select v-model="form.salesmanGroupName" :placeholder="$t('salesManage.salesTeam')"
                                           clearable style="width:100%;">
                                    <el-option v-for="item in captainList" :key="item.username" :value="item.username"
                                               :label="item.username"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button v-if="roleId===3" @click="exportExcel" type="primary">{{ $t('common.export') }}</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" :row-class-name='tableRowClassName' :max-height="tableMaxHeight" style="width: 100%;">
                        <!--手机号码-->
                        <el-table-column prop="phone" :label="$t('common.mobileNumber')" min-width="130">
                            <template slot-scope="{$index,row }">
                                <a @click="goDetail(row,$index)" type="text" size="small" v-if="row.phone"
                                   href="javascript:void(0);">{{ row.phone }}</a>
                            </template>
                        </el-table-column>
                        <!-- 姓名 -->
                        <el-table-column prop="realName" :label="$t('common.name')" min-width="180"></el-table-column>
                        <!--营销类型-->
                        <el-table-column prop="marketingType" :label="$t('salesManage.marketingType')" min-width="120">
                            <template slot-scope="{ row }">{{ keyMap.marketingType(row.marketingType) }}</template>
                        </el-table-column><!--营销类型-->
                        <!--优惠券-->
                        <el-table-column prop="couponUrl" :label="$t('common.coupons')" min-width="180">
                            <template slot-scope="{ row }">{{ !row.couponUrl ? '--' : row.couponUrl }}</template>
                        </el-table-column><!--优惠券-->
                        <!--<el-table-column prop="extraInformation" :label="$t('salesManage.informationAdditional')" :show-overflow-tooltip="true" min-width="120"></el-table-column>&lt;!&ndash;补充信息&ndash;&gt;-->
                        <!-- 备注 -->
                        <el-table-column prop="recordRemark" :label="$t('common.remark')" :show-overflow-tooltip="true"
                                         min-width="100">
                            <template slot-scope="{ row }">
                                {{ !row.recordRemark ? '--' : row.recordRemark }}
                            </template>
                        </el-table-column>
                        <!-- 分派时间 -->
                        <el-table-column prop="distributionTime" :label="$t('tel.timeDispatch')" min-width="170">
                            <template slot-scope="scope">
                                {{ scope.row.distributionTime | formatDate('yyyy-MM-dd hh:mm:ss') }}
                            </template>
                        </el-table-column>
                        <!-- 处理时间 -->
                        <el-table-column prop="handleTime" :label="$t('salesManage.dealTime')" min-width="170">
                            <template slot-scope="scope">{{ scope.row.handleTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <!-- 下次跟进时间 -->
                        <el-table-column prop="nextFollowTime" :label="$t('salesManage.nextFollowTime')" min-width="170">
                            <template slot-scope="scope">{{ scope.row.nextFollowTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <!-- 电销员 -->
                        <el-table-column v-if="roleId===2||roleId===3" prop="salesmanName" key="salesmanName"
                                         :label="$t('salesManage.salesman')" min-width="180"></el-table-column>
                        <!-- 批次号 -->
                        <el-table-column prop="batchCode" :label="$t('salesManage.batchNumber')"
                                         min-width="180"></el-table-column>
                        <!--所属APP-->
                        <el-table-column prop="appName" :label="$t('common.ownedApp')" min-width="120">
                            <template slot-scope="{ row }">{{ row.appName | switchAppName }}</template>
                        </el-table-column><!--所属APP-->
                        <el-table-column prop="productName" :label="$t('finance.productName')" min-width="180"></el-table-column><!--产品名-->
                        <!-- 导入备注 -->
                        <el-table-column prop="remark" :label="$t('common.importRemark')" :show-overflow-tooltip="true"
                                         min-width="100">
                            <template slot-scope="{ row }">
                                {{ !row.remark ? '--' : row.remark }}
                            </template>
                        </el-table-column>
                        <!-- 电销小组 -->
                        <el-table-column v-if="roleId===3" prop="salesmanGroupName" key="salesmanGroupName" :label="$t('salesManage.salesTeam')"
                                         min-width="180"></el-table-column>
                    </el-table>
                    <!-- 分页组件 -->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import Pagination from '@/components/pagination';
import mixin from '@/service/mixin';
import mixinTM from './mixin/mixin-tel-manage';
import keyMap from '@/config/key-map';
import SelectAppList from '@/components/select-app-list';

export default {
    name: 'telemarketing-telManage-processed',
    components: {
        Pagination,
        SelectAppList,
    },
    mixins: [mixin, mixinTM],
    data() {
        return {
            keyMap,
            userStorage: this.$storage.get('user'),
            roleId: 0, //客服员角色 0：待分配 1：客服专员  2：主管 3-经理
            form: {
                currentStatus: 2,  //1 待处理 2 已处理  3 已达成  4 已失效
                phone: '',
                realName: '',
                batchCode: '',
                distributionTime: [],
                nextFollowTime: [],
                salesmanName: '',
                salesmanGroupName: '',
                marketingType: '',
                appName: '',
            },
            totalRecord: '',
            rules: {
                phone: [
                    {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                ]
            },
            captainList: [],
            batchCodeList: [], // 批次号列表
        };
    },
    methods: {
        tableRowClassName({row}){
            if(row.register){
                return 'warning-row'
            }
        },
        handleMarketTypeChange(val) {
            this.batchCodeList = [];
            this.form.batchCode = '';
            if (val) {
                const params = {
                    marketingType: val, // 营销类型 1 还款未复借，2白名单
                    currentStatus: '2', // 当前状态 1 待处理 2 已处理
                };
                this.$api.telSales.getUserBatchCodeList(params).then(res => {
                    const { status, data } = res;
                    if ('1' === status) {
                        this.batchCodeList = data.data;
                    }
                });
            }
        },
    },
    created() {
        this.$storage.set('processed', this.form);
        this.getCaptainList();
        this.getUserInfo();
    }
}
</script>
<style lang="scss">
[data-page=telemarketing-telManage-processed] {
    .el-table .cell, .el-table th > .cell {
        word-break: keep-all;
        word-wrap: break-word;
    }

    .el-button {
        margin-bottom: 18px
    }
    .warning-row{
        color: #a30014 !important;
        a{
          color: #a30014 !important;
        }
    }
    .el-table__row {
        .el-button {
            margin-bottom: 0px
        }
    }
}
</style>

